<template>
  <div class="live_Container">

    <!-- 轮播图 -->
    <!-- swiper -->
    <van-swipe class="my-swipe" :autoplay="10000" indicator-color="white">
      <van-swipe-item v-for="(banner,index) in bannerList" :key="index">
        <img class="Img" :src="banner.picUrl" alt="">
      </van-swipe-item>
     
    </van-swipe>
    <!-- main区域 -->
    <div class="main">
      <!-- 四季 -->
      <div class="siji" v-for="(floor,index) in floorList" :key="index">
        <div class="header" >
          <div class="siji_top">{{floor.category.name}}</div>
          <div class="siji_bottom">{{floor.category.frontName}}</div>
        </div>

        <div class="session">

          <!-- <div class="mainItem"> -->
            <div class="sessionItem" v-for="(item,index) in floor.itemList" :key="item.id" >
            <div class="itemImg">
              <img :src="item.listPicUrl" alt="">
            </div>
            <div class="itemDesc">
              <div class="desc">
                <!-- <div class="Img"> -->
                  
                <!-- </div> -->
                <p class="text">
                  <img class="Img" v-if="item.topLogo?.logoUrl && item.topLogo" src="https://yanxuan.nosdn.127.net/static-union/16698631101bcf18.png" alt="">不与螨虫一起睡，真是枕套</p>
              </div>
              <div class="package" v-if="item.itemTagList[0]?.name">
                <span class="redImg">
                  <img class="redicon" src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="">
                </span>
                <span class="text">{{item.itemTagList[0]?.name}}</span>
              </div>
              <div class="price">
                <span class="daoshou">{{item.finalPriceInfoVO.priceInfo.finalPrice?.prefix}}￥</span>
                <em class="redFont">{{item.finalPriceInfoVO.priceInfo.finalPrice?.price || item.finalPriceInfoVO.priceInfo.basicPrice}}</em>
                <i class="gray" v-if="item.finalPriceInfoVO.priceInfo.counterPrice">￥<del>{{item.finalPriceInfoVO.priceInfo.counterPrice}}</del></i>
              </div>
              <div class="des" v-if="item.finalPriceInfoVO.banner?.content">
                {{item.finalPriceInfoVO.banner?.content}}
              </div>
            </div>
            <div class="selectColor">
              <div class="item">{{ item.colorNum }}</div>
              <div class="item">色</div>
              <div class="item">可</div>
              <div class="item">选</div>
            </div>
            </div>
          <!-- </div> -->
          
        </div>
      </div>
    </div>

  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
import { storeToRefs } from 'pinia';
  export default defineComponent({
    name:''
  })
</script>
<script lang="ts" setup>
import {ref,onMounted} from 'vue'

import {useLiveStore} from '@/stores/homelive'

const liveStore = useLiveStore()
const {getInitData } = useLiveStore()
onMounted(()=>{
  getInitData()
})
// 初始化数据
const {bannerList,floorList} = storeToRefs(liveStore)


</script>

<style lang="less" scoped>
.live_Container{
  background-color: #EEEEEE;
  width: 100%;
  height: 100%;
  .my-swipe {
    margin-top: 76px;
    width: 100%;
    height: 148px;
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      // background-color: #39a9ed;
    }
    .Img{
      width: 100%;
      height: 100%;
    }
    :deep(.van-swipe__indicator){
      width: 25px;
      height: 2px;
      border-radius: 0;
    }
  }
  .main{
    margin: 10px 0;

    .siji{
      margin-top: 10px;
      background-color: #fff;
      padding: 0 10px;
      padding-bottom: 20px;
      .header{
        box-sizing: border-box;
        padding-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        .siji_top{
          text-align: center;
          font-size: 16px;
          width: 100%;
        }
        .siji_bottom{
          font-size: 12px;
        }
      }
      .session{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        &::after{
          content: '';
          display: block;
          width: 100px;
        }
        .sessionItem{
          width: 172px;
          position: relative;
          margin-top: 20px;
          .itemImg{
            width: 172px;
            height: 172px;
            margin-bottom: 6px;
            // border-radius: 10px;
            img{
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
          }
          .itemDesc{
            .desc{
              .text{
                font-size: 14px;
                .Img{
                width: 15px;
                height: 15px;
                margin-right: 5px;
              }
              }
            }
            .package{
              display: flex;
              width: 67px;
              height: 15px;
              line-height: 15px;
              font-size: 12px;
              border-radius: 15px;
              border:1px solid #ccc;
              margin: 4px 0;
              .redImg{
                width: 10px;
                height: 10px;
                .redicon{
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .price{
              color: red;
              .daoshou{
                font-size: 14px;
              }
              .redFont{
                font-size:20px;
              }
              .gray{
                font-size: 12px;
                color:#bdbfc0;
              }
            }
            .des{
              width: 90px;
              height: 20px;
              border-radius: 20px;
              background-color: #f64545;
              color:#fff;
              font-size: 14px;
              line-height: 20px;
              text-align: center;
            }
          }
          .selectColor{
            position: absolute;
            left: 5px;
            top: 5px;
            padding: 6px 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 16px;

            font-size: 14px;
            align-items: center;
            background: #e9e3d0;
            color: #fbd5a1;
            .item{
              flex: 1;
              width: 14px;
              text-align: center;
              height: 12px;
            }
          }
        }
      }
    }
  }
}

</style>
